<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    <link href="https://fonts.googleapis.com/css2?family=Arimo&family=Bebas+Neue&family=Inconsolata&display=swap" rel="stylesheet">
    <title>Redeye Record</title>
    <link rel="stylesheet" href="redeye.css">
    <script src="redeye.js"></script>
</head>

<body>

<header>
    <!-- the first block of the website -->
    <section id='titles'>
        <h2><a href='index.html'>REDEYE</a></h2>
        <h3>DANCE MUSIC SPECIALISTS SINCE 1992
            <span id='hamburger' onclick="showHide('menu')">
                    <a href="javascript:void(0);"><i class="fa fa-bars"></i></a>
                </span>
        </h3>
    </section>

    <nav id='menu'>
        <ul>
            <li><a href='contact.html'>CONTACT</a></li>
            <li><a href='support.html'>SUPPORT</a></li>
            <li><a href='aboutus.html'>ABOUT US</a></li>
            <li><a href=''>MY ACCOUNT</a></li>
            <li><a href=''><i class='fa fa-search'></i></a></li>
            <li><a href='cart.html'><i class="fas fa-shopping-cart"></i></a></li>
        </ul>
    </nav>
</header>

<main>
    <!-- The navigation bar -->
    <section class="navigation-wrap" >
        <ul class='navigation'>
            <li><a href="">All</a></li>
            <li><a href="">Genre<i class="fas fa-caret-down"></i></a></li>
            <li><a href="">New Release<i class="fas fa-caret-down"></i></a></li>
            <li><a href="">Sale<i class="fas fa-caret-down"></i></a></li>
            <li class='last-item'><a href="">Pre-orders<i class="fas fa-caret-down"></i></a></li>
        </ul>
    </section>

    <section class="cart-section">
        <p class="cart-title"> Shopping Cart (4)</p>
        <div class="cart-container">
            <div class="cart-items">
                <div class="cart-container-title">
                    <span id="item">ITEM</span>
                    <span id="price">PRICE</span>
                    <span id="quantity">QUANTITY</span>
                    <span id="total">TOTAL</span>
                </div>
                <div class="cart-container-item">
                    <div class="record-detail">
                        <img src="images/26.jpg" alt="">
                        <div class="record-info">
                            <div class="title">SHALL NOT FADE</div>
                            <div class="author">Djoko</div>
                        </div>
                        <span class="record-price">$26.00</span>
                    </div>
                    <div class="shopping-detail">
                        <div class="stepper">
                            <button>+</button>
                            <input type="number" min="1" value="1">
                            <button>-</button>
                        </div>
                        <div class="option">
                            <span>$26.00</span>
                            <button>×</button>
                        </div>
                    </div>
                </div>
                <div class="cart-container-item">
                    <div class="record-detail">
                        <img src="images/6.jpg" alt="">
                        <div class="record-info">
                            <div class="title">MUKATSUKU</div>
                            <div class="author">Pat Thomas</div>
                        </div>
                        <span class="record-price">$92.00</span>
                    </div>
                    <div class="shopping-detail">
                        <div class="stepper">
                            <button>+</button>
                            <input type="number" min="1" value="2">
                            <button>-</button>
                        </div>
                        <div class="option">
                            <span>$184.00</span>
                            <button>×</button>
                        </div>
                    </div>
                </div>
                <div class="cart-container-item">
                    <div class="record-detail">
                        <img src="images/3.jpg" alt="">
                        <div class="record-info">
                            <div class="title">Sarky EP</div>
                            <div class="author">Harry Wills</div>
                        </div>
                        <span class="record-price">$92.00</span>
                    </div>
                    <div class="shopping-detail">
                        <div class="stepper">
                            <button>+</button>
                            <input type="number" min="1" value="1">
                            <button>-</button>
                        </div>
                        <div class="option">
                            <span>$92.00</span>
                            <button>×</button>
                        </div>
                    </div>
                </div>
                <div class="cart-btn">
                    <button>Continue Shopping</button>
                    <button>Empty Cart</button>
                </div>
            </div>
            <div class="cart-summary">
                <div class="cart-container-title">
                    <span id="summary">SUMMARY</span>
                </div>
                <div class="cart-container-summary">
                    <div class="summary-detail">
                        <div class="total">
                            <span>Total</span>
                            <span>$302.00</span>
                        </div>
                        <p>*Shipping & taxes calculated at checkout.</p>
                        <div class="btn">
                            <button id="voucher-code">Voucher Code</button>
                            <button id="apply">Apply</button>
                        </div>
                    </div>
                    <div class="checkout">
                        <button>Proceed to Checkout</button>
                        <div class="wirecard">
                            wirecard
                            <i class="fab fa-cc-visa"></i>
                            <i class="fab fa-paypal"></i>
                            <i class="fab fa-cc-diners-club"></i>
                            <i class="fab fa-cc-paypal"></i>
                            <i class="fab fa-cc-discover"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>

<footer>
    <div class="container flex flex-wrap">
        <section class='words flex-1 flex-100'>
            <address>
                Redeye Records Ltd., Unit 5,<br>
                Cristal Business Centre, Knightsdale Rd,<br>
                Ipswich IP1 4JJ<br>
            </address>
            <br><br>
            <strong>Copyright 2020 Redeye Record. A website by Eq.</strong>
        </section>
        <br>
        <section class='socials flex-1 flex-100'>
            <strong>Stay In Touch<strong>
                 <form action=''>
                     <input class="email" type="text" placeholder="Email Address">
                     <label class="email" for="email"><i class="fas fa-arrow-right"></i></label>
                     <br>
                     <input id="agree" type="checkbox">
                     <label for="agree">I agree to the privacy policy and terms and conditions.</label>
                 </form>
                 <p class='footer_icons'>
                     <i class="fab fa-facebook-f"></i>
                     <i class="fab fa-instagram"></i>
                     <i class="fab fa-twitter"></i>
                     <i class="fab fa-pinterest"></i>
                     <i class="fab fa-youtube"></i>
                     <i class="fa fa-envelope"></i>
                 </p>
        </section>
    </div>
</footer>
</body>
</html>